<template>
  <div class="order-detail">
    <!-- 订单基本信息 -->
    <el-card class="detail-card">
      <template #header>
        <div class="card-header">
          <span>订单基本信息</span>
          <el-tag type="success">
            {{ orderInfo.state }}
          </el-tag>
        </div>
      </template>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="订单编号">{{ orderInfo.order_no }}</el-descriptions-item>
        <el-descriptions-item label="下单时间">{{ orderInfo.create_time }}</el-descriptions-item>
        <el-descriptions-item label="支付方式">
          {{ orderInfo.payMethod === 1 ? '微信支付' : '支付宝' }}
        </el-descriptions-item>
        <el-descriptions-item label="支付时间">{{ orderInfo.create_time || '-' }}</el-descriptions-item>
        <el-descriptions-item label="订单金额">¥{{ orderInfo.total_price?.toFixed(2) }}</el-descriptions-item>
        <el-descriptions-item label="订单备注">{{ orderInfo.remark || '暂无备注' }}</el-descriptions-item>
        <el-descriptions-item label="商品名称">{{ orderInfo.good_name }}</el-descriptions-item>
        <el-descriptions-item label="商品颜色">{{ orderInfo.standard }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 收货信息 -->
    <el-card class="detail-card">
      <template #header>
        <div class="card-header">
          <span>收货信息</span>
        </div>
      </template>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="收货人">{{ orderInfo.link_user }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ orderInfo.link_phone }}</el-descriptions-item>
        <el-descriptions-item label="收货地址" :span="2">{{ orderInfo.link_address }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
    <!-- 操作按钮 -->
    <div class="operation-buttons">
      <el-button @click="goBack">返回列表</el-button>
      <el-button 
        v-if="orderInfo.status === 1"
        type="primary"
        @click="handleShip">发货</el-button>
    </div>

    <!-- 发货对话框 -->
    <el-dialog
      v-model="shipDialogVisible"
      title="订单发货"
      width="500px">
      <el-form
        ref="shipFormRef"
        :model="shipForm"
        :rules="shipRules"
        label-width="100px">
        <el-form-item label="物流公司" prop="company">
          <el-select v-model="shipForm.company" placeholder="请选择物流公司">
            <el-option label="顺丰快递" value="SF" />
            <el-option label="中通快递" value="ZTO" />
            <el-option label="圆通快递" value="YTO" />
            <el-option label="韵达快递" value="YD" />
          </el-select>
        </el-form-item>
        <el-form-item label="物流单号" prop="trackingNo">
          <el-input v-model="shipForm.trackingNo" placeholder="请输入物流单号" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="shipDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmShip" :loading="shipLoading">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'
import { getOrderByOrderNoAPI, getOrderByUserIdAPI } from '../../../api/order'

const route = useRoute()
const router = useRouter()
const orderId = route.params.id
const orderNo = route.params.orderNo


const orderInfo = ref({})
const shipDialogVisible = ref(false)
const shipLoading = ref(false)
const shipFormRef = ref(null)

const shipForm = reactive({
  company: '',
  trackingNo: ''
})

const shipRules = {
  company: [
    { required: true, message: '请选择物流公司', trigger: 'change' }
  ],
  trackingNo: [
    { required: true, message: '请输入物流单号', trigger: 'blur' }
  ]
}

// 获取订单详情
const getOrderDetail = async () => {
  try {
    
    const res = await getOrderByUserIdAPI(orderId)
    
    
    // const res = await getOrderByOrderNoAPI(orderNo)
    console.log(res);
    
    if(res.code === '200') {
      let arr = res.data.filter((item)=>{
        return item.order_no===orderNo
      })
      orderInfo.value = arr[0]
      
    } else {
      ElMessage.error(res.msg)
    }
  } catch (error) {
    console.error('获取订单详情失败:', error)
  }
}



// 获取物流公司名称
const getLogisticsCompany = (code) => {
  const companies = {
    'SF': '顺丰快递',
    'ZTO': '中通快递',
    'YTO': '圆通快递',
    'YD': '韵达快递'
  }
  return companies[code] || code
}

// 返回列表
const goBack = () => {
  router.push('/admin/orders')
}

// 发货
const handleShip = () => {
  shipForm.company = ''
  shipForm.trackingNo = ''
  shipDialogVisible.value = true
}

// 确认发货
const confirmShip = () => {
  shipFormRef.value.validate(async (valid) => {
    if (valid) {
      shipLoading.value = true
      try {
        await request({
          url: `/order/ship/${orderId}`,
          method: 'put',
          data: shipForm
        })
        ElMessage.success('发货成功')
        shipDialogVisible.value = false
        getOrderDetail()
      } catch (error) {
        console.error('发货失败:', error)
      } finally {
        shipLoading.value = false
      }
    }
  })
}

onMounted(() => {
  getOrderDetail()
})
</script>

<style scoped>
.order-detail {
  .detail-card {
    margin-bottom: 20px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .order-total {
    margin-top: 20px;
    text-align: right;
    padding-right: 20px;

    .price {
      color: #f56c6c;
      font-size: 18px;
      font-weight: bold;
      margin-left: 10px;
    }
  }

  .operation-buttons {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 20px;
  }
}
</style> 